<template>
  <div>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="8">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" :hide-required-asterisk="true">
          <el-col :xs="24">
            <el-form-item label="Redis Host" prop="redisHost" class="spread">
              <el-input v-model="ruleForm.redisHost" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="Redis Port" prop="redisPort" class="spread">
              <el-input v-model="ruleForm.redisPort" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="Redis Auth" prop="redisAuth" class="spread">
              <div style="display:flex">
                <el-input v-model="ruleForm.redisAuth"></el-input>
                <el-button type="primary" size="small" style="margin-left:15px" @click='handleTset'>{{$t('system.test')}}</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item>
              <!-- <el-button @click="handleReset('ruleForm')">重 置</el-button> -->
              <el-button type="primary" @click="handleSave('ruleForm')" :loading="loading">{{ $t("common.preservation") }}</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { siteConfig } from '@/api/siteConfig'
export default {
  data () {
    return {
      ruleForm: {
        redisHost: '',
        redisPort: '',
        redisAuth: '',
        hostId: '',
        portId: '',
        authId: ''
      },
      rules: {
        redisHost: [{ required: true, message: '请输入Redis Host', trigger: 'blur' }],
        redisPort: [{ required: true, message: '请输入Redis Port', trigger: 'blur' }],
        redisAuth: [{ required: true, message: '请输入Redis Auth', trigger: 'blur' }],
      },
      loading: false
    }
  },
  created () {
    this.findRedis()
  },
  methods: {
    findRedis () {
      siteConfig.redisList().then(res => {
        if (res.code == 200) {
          if (res.data.rows && res.data.rows.length) {
            this.ruleForm.redisHost = res.data.rows[1].value
            this.ruleForm.redisPort = res.data.rows[2].value
            this.ruleForm.redisAuth = res.data.rows[0].value

            this.ruleForm.hostId = res.data.rows[1].fid
            this.ruleForm.portId = res.data.rows[2].fid
            this.ruleForm.authId = res.data.rows[0].fid
          }

        }
      })
    },

    handleSave (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let connect = await this.handleTset('save')
          if (connect) {
            const param = {
              keys: "spring.redis.port",
              value: this.ruleForm.redisPort,
              fid: this.ruleForm.portId
            }
            const param1 = {
              keys: "spring.redis.host",
              value: this.ruleForm.redisHost,
              fid: this.ruleForm.hostId
            }
            const param2 = {
              keys: "keycloak.auth-server-url",
              value: this.ruleForm.redisAuth,
              fid: this.ruleForm.authId
            }
            this.loading = true
            let res = await siteConfig.modifyRedis(param)
            let res1 = await siteConfig.modifyRedis(param1)
            let res2 = await siteConfig.modifyRedis(param2)
            if (res2.code == 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
            }
          }

          this.loading = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleTset (type) {
      return new Promise((resolve, reject) => {
        const param = {
          type: 2,
          springRedisHost: this.ruleForm.redisHost,
          springRedisPort: parseFloat(this.ruleForm.redisPort),
          springRedisPassword: ""
        }
        siteConfig.connect(param).then(res => {
          if (res.code == 200) {
            resolve(true)
            if (type != 'save') {
              this.$message({
                message: res.msg,
                type: 'success'
              });
            }

          } else {
            resolve(false)
            this.$message.error(res.msg);
          }
        })
      })
    },
    handleReset1 (formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style scoped>
.form {
  width: 50%;
}
.spread >>> .el-select {
  width: 100%;
}
</style>